<template>
  <div class="box">
    <div class="top">
      <van-dropdown-menu swipe-threshold="4">
        <van-dropdown-item :title="value1">
          <van-area title="地区选择" columns-num="2" @confirm="kk" :area-list="areaList" />
        </van-dropdown-item>
        <van-dropdown-item :title="value2">
          <van-tree-select
            style="height: 100vh"
            v-model:active-id="activeId"
            v-model:main-active-index="activeIndex"
            :items="items"
            @click-item="keshi"
          />
        </van-dropdown-item>
        <van-dropdown-item :title="value3">
          <van-tree-select
            style="height: 100vh"
            v-model:active-id="activeId"
            v-model:main-active-index="activeIndex"
            :items="jibing"
            @click-item="jib"
          />
        </van-dropdown-item>
        <van-dropdown-item v-model="value4" :options="option2" @change="changePort" />
      </van-dropdown-menu>
    </div>
    <div class="middle">
      <div class="bottom2Top">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in date" :key="index" class="bottom2Top">
            <div class="top-head-text">
              <div class="top-head-zhi">
                <img src="../../assets/img/知名.png" alt="" />
                知名专家
              </div>
              <div class="head-text-tou">
                <img :src="item.image" alt="" />
                <p class="head-text-tou-pa">
                  <span class="head-text-tou-pa-name">{{ item.name }}</span>
                  |
                  <span>{{ item.type }}</span>
                  <span>{{ item.keshi }}</span>
                  <span class="head-text-tou-pa-ke">可开处方</span>
                </p>
                <p clang="head-text-tou-pb">
                  <span>{{ item.hospital }}</span>
                  <span class="head-text-tou-pb-san">三甲</span>
                  <span class="head-text-tou-pb-bai">百强医院</span>
                </p>
              </div>
              <div class="head-text-text">
                <p>
                  {{ item.shanc }}
                </p>
              </div>
              <div class="head-text-shu">
                <span>
                  {{ item.pingf_formatted }}
                  <van-icon name="star" color="#fdb206" />
                </span>
                <span>接诊量{{ item.reply_num }}万</span>
                <span>同行认可{{ item.tongh }}</span>
              </div>
              <div class="head-text-an">
                <div>
                  <span>电话￥10</span>
                </div>
                <div>
                  <span>视频￥20</span>
                </div>
                <div>
                  <span>图文￥30</span>
                </div>
                <div class="head-text-an-right">年度好医生</div>
              </div>
              <div class="head-text-yixue">
                <p>医学博士，{{ item.address }}康复医学会泌尿盆底专业委员会委员</p>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { areaList } from '@vant/area-data'
const value1 = ref('全国')
const value2 = ref('科室')
const value3 = ref('疾病')
const value4 = ref(0)

const date = ref([])
const num = ref(0)
// 获取数据
const data = ref([])
const data1 = ref([])
const getData = async () => {
  axios
    .get('http://localhost:3001/data')
    .then((response) => {
      console.log(response.data, 'response.data')
      console.log(typeof num.value, 'num.value type')
      console.log(Array.isArray(response.data), 'response.data is array')
      data.value = response.data
      data1.value = response.data
      date.value = date.value.concat(response.data.splice(num.value, 5))
    })
    .catch((error) => {
      console.error('Error fetching data: ', error)
    })
}
getData()
// 筛选
const keshi = (e) => {
  console.log(e.text, '111')
  value2.value = e.text
  date.value = data.value.filter((item) => item.keshi == e.text)
  if (e.text == '全部疾病') {
    date.value = data.value
  }
  console.log(date.value, 'date')
}
const jib = (e) => {
  console.log(e.text, '111')
  value3.value = e.text
}
const ports = ref('')
const changePort = (e) => {
  console.log(option2[e].text)
  ports.value = option2[e].text
  if (ports.value == '接诊量') {
    date.value = date.value.sort((a, b) => b.reply_num - a.reply_num)
  }
  if (ports.value == '综合排序') {
    date.value = date.value.sort((a, b) => b.tongh - a.tongh)
  }
  if (ports.value == '好评') {
    date.value = date.value.sort((a, b) => b.pingf_formatted - a.pingf_formatted)
  }
}
console.log(areaList)
const kk = (e) => {
  console.log(e.selectedOptions[1].text, '222')
  value1.value = e.selectedOptions[1].text
  date.value = data.value.filter((item) => item.address == value1.value)
}
const activeId = ref(1)

// 上拉加载更多
const loading = ref(false)
const finished = ref(false)

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    num.value += 5
    console.log(num.value, 'num')

    getData()
    console.log(date.value, 'date')

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (date.value.length > data1.value.length) {
      finished.value = true
    }
  }, 1000)
}
const activeIndex = ref(0)
const items = [
  {
    text: '全部',
    children: [{ text: '全部疾病', id: 1 }]
  },
  {
    text: '内科',
    children: [
      { text: '呼吸内科', id: 2 },
      { text: '消化内科', id: 3 },
      { text: '神经内科', id: 4 },
      { text: '内分泌科', id: 5 },
      { text: '心血管内科', id: 6 },
      { text: '风湿免疫科', id: 7 },
      { text: '血液内科', id: 8 },
      { text: '肾内科', id: 9 },
      { text: '感染内科', id: 10 },
      { text: '老年病科', id: 11 },
      { text: '普通内科', id: 12 },
      { text: '高压氧科', id: 13 },
      { text: '过敏反应科', id: 14 }
    ]
  },
  {
    text: '外科',
    children: [
      { text: '普通外科', id: 15 },
      { text: '泌尿外科', id: 16 },
      { text: '胸外科', id: 17 },
      { text: '心血管外科', id: 18 },
      { text: '神经外科', id: 19 },
      { text: '胃肠外科', id: 20 },
      { text: '肝胆外科', id: 21 },
      { text: '肛肠外科', id: 22 },
      { text: '烧伤科', id: 23 },
      { text: '器官移植', id: 24 },
      { text: '血管外科', id: 25 },
      { text: '甲状腺外科', id: 26 },
      { text: '乳腺外科', id: 27 },
      { text: '介入医学科', id: 28 }
    ]
  },
  {
    text: '妇产科',
    children: [
      { text: '妇产科', id: 29 },
      { text: '产科', id: 30 },
      { text: '妇科', id: 31 },
      { text: '计划生育科', id: 32 },
      { text: '生殖医学科', id: 33 },
      { text: '遗传咨询科', id: 34 },
      { text: '妇科内分泌', id: 35 },
      { text: '妇科肿瘤', id: 36 },
      { text: '产前检查科', id: 37 }
    ]
  },
  {
    text: '儿科',
    children: [
      { text: '新生儿科', id: 38 },
      { text: '新生儿外科', id: 39 },
      { text: '小儿内科', id: 40 },
      { text: '小儿呼吸科', id: 41 },
      { text: '小儿消化科', id: 42 },
      { text: '小儿心内科', id: 43 },
      { text: '小儿肾内科', id: 44 },
      { text: '小儿神经内科', id: 45 },
      { text: '小儿泌尿外科', id: 46 },
      { text: '小儿血液科', id: 47 },
      { text: '小儿内分泌科', id: 48 },
      { text: '小儿风湿免疫科', id: 49 },
      { text: '小儿外科', id: 50 },
      { text: '小儿康复科', id: 51 },
      { text: '小儿皮肤科', id: 52 },
      { text: '小儿耳鼻喉科', id: 53 },
      { text: '小儿眼科', id: 54 },
      { text: '小儿口腔科', id: 55 },
      { text: '儿童保健科', id: 56 },
      { text: '小儿急救科', id: 57 }
    ]
  },
  {
    text: '眼科',
    children: [
      { text: '眼底科', id: 69 },
      { text: '白内障科', id: 70 },
      { text: '角膜科', id: 71 },
      { text: '青光眼科', id: 72 },
      { text: '眼外伤科', id: 73 },
      { text: '小儿眼科', id: 74 },
      { text: '眼视光学科', id: 75 },
      { text: '眼眶及眼肿瘤科', id: 76 },
      { text: '眼整形科', id: 77 }
    ]
  },
  {
    text: '口腔科',
    children: [
      { text: '口腔预防科', id: 78 },
      { text: '口腔正畸科', id: 79 },
      { text: '口腔修复科', id: 80 },
      { text: '口腔黏膜科', id: 81 },
      { text: '牙体牙植科', id: 82 },
      { text: '牙周科', id: 83 },
      { text: '种植科', id: 84 },
      { text: '颌面外科', id: 86 },
      { text: '儿童口腔科', id: 87 }
    ]
  },
  {
    text: '耳鼻咽喉头颈科',
    children: [
      { text: '耳鼻喉科', id: 88 },
      { text: '头颈外科', id: 89 },
      { text: '耳科', id: 90 },
      { text: '鼻科', id: 91 },
      { text: '喉科', id: 92 }
    ]
  },
  {
    text: '肿瘤科',
    children: [
      { text: '肿瘤内科', id: 93 },
      { text: '肿瘤外科', id: 94 },
      { text: '放疗科', id: 95 }
    ]
  },
  {
    text: '皮肤性病科',
    children: [
      { text: '皮肤科', id: 96 },
      { text: '性病科', id: 97 }
    ]
  },
  {
    text: '中医科',
    chil: [
      { text: '中医科', id: 98 },
      { text: '中医妇产科', id: 99 },
      { text: '中医儿科', id: 100 },
      { text: '中医内分泌科', id: 101 },
      { text: '中医消化科', id: 102 },
      { text: '中医呼吸科', id: 103 },
      { text: '中医肾病科', id: 104 },
      { text: '中医免疫内科', id: 105 },
      { text: '中医心内科', id: 106 },
      { text: '中医血液科', id: 107 },
      { text: '中医神经内科', id: 108 },
      { text: '中医肝病科', id: 109 },
      { text: '中医感染内科', id: 110 },
      { text: '中医肿瘤科', id: 111 },
      { text: '中医皮肤科', id: 112 },
      { text: '中医男科', id: 113 },
      { text: '中医外科', id: 114 },
      { text: '中医骨科', id: 115 },
      { text: '中医乳腺外科', id: 116 },
      { text: '中医肛肠科', id: 117 },
      { text: '中医精神科', id: 118 },
      { text: '中医眼科', id: 119 },
      { text: '中医耳鼻咽喉科', id: 120 },
      { text: '中医按摩科', id: 121 },
      { text: '针灸科', id: 122 }
    ]
  },
  {
    text: '骨伤科',
    children: [{ texxt: '骨伤科', id: 123 }]
  },
  {
    text: '精神心理科',
    children: [
      { text: '全部精神心理科', id: 124 },
      { text: '精神科', id: 125 },
      { text: '心理科', id: 126 }
    ]
  },
  {
    text: '全科',
    children: [{ text: '全科医学科', id: 127 }]
  },
  {
    text: '口腔颌面科',
    children: [{ text: '全部口腔颌面科', id: 128 }]
  }
]

const jibing = [
  {
    text: '内科',
    children: [
      { text: '呼吸内科', id: 2 },
      { text: '消化内科', id: 3 },
      { text: '神经内科', id: 4 },
      { text: '内分泌科', id: 5 },
      { text: '心血管内科', id: 6 },
      { text: '风湿免疫科', id: 7 },
      { text: '血液内科', id: 8 },
      { text: '肾内科', id: 9 },
      { text: '感染内科', id: 10 },
      { text: '老年病科', id: 11 },
      { text: '普通内科', id: 12 },
      { text: '高压氧科', id: 13 },
      { text: '过敏反应科', id: 14 }
    ]
  },
  {
    text: '外科',
    children: [
      { text: '普通外科', id: 15 },
      { text: '泌尿外科', id: 16 },
      { text: '胸外科', id: 17 },
      { text: '心血管外科', id: 18 },
      { text: '神经外科', id: 19 },
      { text: '胃肠外科', id: 20 },
      { text: '肝胆外科', id: 21 },
      { text: '肛肠外科', id: 22 },
      { text: '烧伤科', id: 23 },
      { text: '器官移植', id: 24 },
      { text: '血管外科', id: 25 },
      { text: '甲状腺外科', id: 26 },
      { text: '乳腺外科', id: 27 },
      { text: '介入医学科', id: 28 }
    ]
  },
  {
    text: '妇产科',
    children: [
      { text: '妇产科', id: 29 },
      { text: '产科', id: 30 },
      { text: '妇科', id: 31 },
      { text: '计划生育科', id: 32 },
      { text: '生殖医学科', id: 33 },
      { text: '遗传咨询科', id: 34 },
      { text: '妇科内分泌', id: 35 },
      { text: '妇科肿瘤', id: 36 },
      { text: '产前检查科', id: 37 }
    ]
  },
  {
    text: '儿科',
    children: [
      { text: '新生儿科', id: 38 },
      { text: '新生儿外科', id: 39 },
      { text: '小儿内科', id: 40 },
      { text: '小儿呼吸科', id: 41 },
      { text: '小儿消化科', id: 42 },
      { text: '小儿心内科', id: 43 },
      { text: '小儿肾内科', id: 44 },
      { text: '小儿神经内科', id: 45 },
      { text: '小儿泌尿外科', id: 46 },
      { text: '小儿血液科', id: 47 },
      { text: '小儿内分泌科', id: 48 },
      { text: '小儿风湿免疫科', id: 49 },
      { text: '小儿外科', id: 50 },
      { text: '小儿康复科', id: 51 },
      { text: '小儿皮肤科', id: 52 },
      { text: '小儿耳鼻喉科', id: 53 },
      { text: '小儿眼科', id: 54 },
      { text: '小儿口腔科', id: 55 },
      { text: '儿童保健科', id: 56 },
      { text: '小儿急救科', id: 57 }
    ]
  },
  {
    text: '眼科',
    children: [
      { text: '眼底科', id: 69 },
      { text: '白内障科', id: 70 },
      { text: '角膜科', id: 71 },
      { text: '青光眼科', id: 72 },
      { text: '眼外伤科', id: 73 },
      { text: '小儿眼科', id: 74 },
      { text: '眼视光学科', id: 75 },
      { text: '眼眶及眼肿瘤科', id: 76 },
      { text: '眼整形科', id: 77 }
    ]
  },
  {
    text: '口腔科',
    children: [
      { text: '口腔预防科', id: 78 },
      { text: '口腔正畸科', id: 79 },
      { text: '口腔修复科', id: 80 },
      { text: '口腔黏膜科', id: 81 },
      { text: '牙体牙植科', id: 82 },
      { text: '牙周科', id: 83 },
      { text: '种植科', id: 84 },
      { text: '颌面外科', id: 86 },
      { text: '儿童口腔科', id: 87 }
    ]
  },
  {
    text: '耳鼻咽喉头颈科',
    children: [
      { text: '耳鼻喉科', id: 88 },
      { text: '头颈外科', id: 89 },
      { text: '耳科', id: 90 },
      { text: '鼻科', id: 91 },
      { text: '喉科', id: 92 }
    ]
  },
  {
    text: '肿瘤科',
    children: [
      { text: '肿瘤内科', id: 93 },
      { text: '肿瘤外科', id: 94 },
      { text: '放疗科', id: 95 }
    ]
  },
  {
    text: '皮肤性病科',
    children: [
      { text: '皮肤科', id: 96 },
      { text: '性病科', id: 97 }
    ]
  },
  {
    text: '中医科',
    chil: [
      { text: '中医科', id: 98 },
      { text: '中医妇产科', id: 99 },
      { text: '中医儿科', id: 100 },
      { text: '中医内分泌科', id: 101 },
      { text: '中医消化科', id: 102 },
      { text: '中医呼吸科', id: 103 },
      { text: '中医肾病科', id: 104 },
      { text: '中医免疫内科', id: 105 },
      { text: '中医心内科', id: 106 },
      { text: '中医血液科', id: 107 },
      { text: '中医神经内科', id: 108 },
      { text: '中医肝病科', id: 109 },
      { text: '中医感染内科', id: 110 },
      { text: '中医肿瘤科', id: 111 },
      { text: '中医皮肤科', id: 112 },
      { text: '中医男科', id: 113 },
      { text: '中医外科', id: 114 },
      { text: '中医骨科', id: 115 },
      { text: '中医乳腺外科', id: 116 },
      { text: '中医肛肠科', id: 117 },
      { text: '中医精神科', id: 118 },
      { text: '中医眼科', id: 119 },
      { text: '中医耳鼻咽喉科', id: 120 },
      { text: '中医按摩科', id: 121 },
      { text: '针灸科', id: 122 }
    ]
  },
  {
    text: '骨伤科',
    children: [{ texxt: '骨伤科', id: 123 }]
  },
  {
    text: '精神心理科',
    children: [
      { text: '全部精神心理科', id: 124 },
      { text: '精神科', id: 125 },
      { text: '心理科', id: 126 }
    ]
  },
  {
    text: '全科',
    children: [{ text: '全科医学科', id: 127 }]
  },
  {
    text: '口腔颌面科',
    children: [{ text: '全部口腔颌面科', id: 128 }]
  }
]
const option2 = [
  { text: '排序', value: 0 },
  { text: '综合排序', value: 1 },
  { text: '接诊量', value: 2 },
  { text: '好评', value: 3 }
]
</script>
<style scoped lang="scss">
.box {
  height: 93%;
  overflow-y: hidden;
}
.middle {
  width: 100%;
  height: 500px;
  margin-bottom: 0;
  overflow: auto;
  // background: white;
  .top-head-text {
    position: relative;
    height: 240px;
    width: 100%;
    background: #fff;
    padding: 20px 10px;
    // border-bottom: 1px solid #000;
    margin-bottom: 10px;
    box-shadow: inset 0px 9px 5px #fff7ed;

    .top-head-zhi {
      position: absolute;
      height: 20px;
      width: 80px;
      background: #ffe7c3;
      right: 0;
      top: 0;
      border-bottom-left-radius: 15px;
      color: #884d18;
      text-align: center;
      line-height: 20px;
      font-weight: bold;
      font-size: 15px;
      img {
        float: left;
        height: 8px;
        width: 10px;
        margin-left: 8px;
        margin-top: 5px;
      }
    }

    .head-text-tou {
      height: 50px;
      width: 100%;
      // background: red;
      font-size: 12px;
      // display: flex;
      img {
        height: 50px;
        width: 50px;
        float: left;
        border-radius: 50px;
      }
      p {
        line-height: 25px;
        span {
          padding-right: 3px;
        }
      }
      .head-text-tou-pa {
        font-size: 14px;
        display: inline-block;
      }
      .head-text-tou-pa-name {
        font-size: 17px;
        font-weight: 600;
        display: inline-block;
      }
      .head-text-tou-pa-ke {
        height: 25px;
        width: 60px;
        background: #f2f8fd;
        color: #a3caf1;
        font-size: 12px;
        display: inline-block;
        line-height: 25px;
      }
      .head-text-tou-pb-san {
        height: 30px;
        width: 60px;
        background: #1cc381;
        color: white;
        margin: 0 5px;
      }
      .head-text-tou-pb-bai {
        color: #f7e9d2;
        background-color: #884d18;
      }
    }
    .head-text-text {
      height: 50px;
      width: 100%;
      // background: orange;
      margin-top: 5px;
      overflow: auto;
      p {
        font-size: 12px;
        line-height: 20px;
      }
    }
    .head-text-shu {
      height: 20px;
      width: 100%;
      span {
        float: left;
        line-height: 20px;
        padding-right: 25px;
      }
    }
    .head-text-an {
      height: 50px;
      width: 100%;
      // background:orchid;
      // border-bottom: 1px solid #000;
      padding-top: 10px;
      span {
        float: left;
        height: 30px;
        width: 70px;
        border: 1px solid #39d167;
        color: #39d167;
        line-height: 30px;
        text-align: center;
        border-radius: 50px;
        font-size: 12px;
        font-weight: bold;
        margin-right: 10px;
      }
      .head-text-an-right {
        float: right;
        height: 20px;
        width: 70px;
        font-size: 10px;
        border: 1px solid #ff7751;
        color: #ff7751;
        border-radius: none;
        text-align: center;
        line-height: 20px;
        margin-top: 8px;
        font-weight: bold;
      }
    }

    .head-text-yixue {
      height: 20px;
      width: 100%;
      background: #f9f9f9;
      line-height: 20px;
    }
  }
}
</style>
